<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.back_details" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000"></u-navbar>
		<view class="alls">
			<view class="state">
			
				
				<text v-show="orderData.paid === false && orderData.status === 0">{{i18n.chargeback_manage.chargeback_details.not_paid}}</text>
				<text v-show="orderData.status === 0">{{i18n.chargeback_manage.chargeback_details.not_shipped}}</text>
				<text v-show="orderData.status === 1">{{i18n.chargeback_manage.chargeback_details.pending_receipt}}</text>
				<text v-show="orderData.status === 3">{{i18n.chargeback_manage.chargeback_details.completed}}</text>
				<text v-show="orderData.status === 9">{{i18n.chargeback_manage.chargeback_details.cancelled}}</text>
				<text v-show="refundData.refundStatus === 0">{{i18n.chargeback_manage.chargeback_details.status0}}</text>
				<text v-show="refundData.refundStatus === 1">{{i18n.chargeback_manage.chargeback_details.status1}}</text>
				<text v-show="refundData.refundStatus === 2">{{i18n.chargeback_manage.chargeback_details.status2}}</text>
				<text v-show="refundData.refundStatus === 3">{{i18n.chargeback_manage.chargeback_details.status3}}</text>
			</view>
			<view class="user">
				<view class="name">
					<text class="title">{{i18n.order.order_details.username}}：</text>
					<text class="rel">{{orderData.nikeName}}</text>
				</view>
				<view class="name">
					<text class="title">{{i18n.order.order_details.email}}：</text>
					<text class="rel">{{orderData.userEmail}}</text>
				</view>
			</view>
			<view class="userinfo">
				<view class="info_t">
					<view class="infot_l">
						<text class="info_tit">{{i18n.order.order_details.name}}：</text>
						<text>{{orderData.realName}}</text>
					</view>
					<view class="infot_l">
						<text class="info_phone">{{i18n.order.order_details.phone}}：</text>
						<text>{{orderData.userPhone}}</text>
					</view>
				</view>
				<view class="info_b">
					<view class="address">
						<text class="info_tit">{{i18n.order.order_details.address}}：</text>
						<text>{{orderData.userAddress}}</text>
					</view>
					<view class="address">
						<text class="info_tit">{{i18n.order.order_details.mailbox}}：</text>
						<text>{{orderData.email}}</text>
					</view>
				</view>
			</view>
		
			<view class="shop" v-for="(item, index) in orderData.orderInfo" :key="index">
				<view class="shop_l">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shop_r">
					<view class="shop_tit">
						{{item.productName}}
					</view>
					<view class="shop_style">
						<text>{{i18n.order.order_details.Specification}}：{{item.sku}}x{{item.payNum}}</text>
						<text>{{i18n.order.order_details.weight}}：{{item.weight}}</text>
					</view>
					<view class="shop_size">
						{{i18n.order.order_details.volume}}：{{item.volume}}m³
					</view>
					<view class="shop_money">
						{{item.price}}
					</view>
				</view>
			</view>

			<view class="quantity">
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.total}}：</text>
					<text>{{orderData.totalNum}}</text>
				</view>
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.postage}}：</text>
					<text>{{orderData.payPostage}}</text>
				</view>
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.coupon}}：</text>
					<text>{{orderData.couponPrice}}</text>
				</view>
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.pay_true}}：</text>
					<text class="pay_true">{{orderData.payPrice}}</text>
				</view>
			</view>
		
			<view class="order">
				<view class="order_tit">
					{{i18n.order.order_details.order_info}}
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.ordermain}}：</text>
					<text>{{orderData.masterOrderNo}}</text>
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.orderid}}：</text>
					<text>{{orderData.orderNo}}</text>
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.pay_type}}：</text>
					<text>{{orderData.payType}}</text>
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.pay_status}}：</text>
					<text v-if="orderData.paid">{{i18n.order.order_details.paid}}</text>
					<text v-else>{{i18n.order.order_details.no_pay}}</text>
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.creat_time}}：</text>
					<text>{{orderData.createTime}}</text>
				</view>
				<view class="order_info"  v-if="orderData.refundStatus>0">
					<text class="title">{{i18n.chargeback_manage.money}}：</text>
					<text>{{orderData.payPrice}}</text>
				</view>
				<view class="order_info"  v-if="orderData.refundStatus>0">
					<text class="title">{{i18n.chargeback_manage.chargeback_details.refund_reason}}：</text>
					<text>{{refundData.refundReasonWap}}</text>
				</view>
				
				<view class="order_info"  v-if="orderData.refundStatus>0">
					<text class="title">{{i18n.chargeback_manage.chargeback_details.refund_remark}}：</text>
					<text>{{refundData.merRemark | filterEmpty}}</text>
				</view>
				
				<view class="order_info"  v-if="orderData.deliveryName">
					<text class="title">{{i18n.chargeback_manage.chargeback_details.delivery_name}}：</text>
					<text>{{orderData.deliveryName}}</text>
				</view>
				<view class="order_info"  v-if="orderData.deliveryName">
					<text class="title">{{i18n.chargeback_manage.chargeback_details.delivery_number}}：</text>
					<text>{{orderData.deliveryId}}</text>
				</view>

			</view>
			<view class="user_remaker">
				<view class="remaker_tit">
					{{i18n.order.order_details.usercomments}}
				</view>
				<view class="remake_cont">
					{{orderData.userRemark | filterEmpty}}
				</view>
			</view>
			<view class="user_remaker">
				<view class="remaker_tit">
					{{i18n.order.order_details.merchant_notes}}
				</view>
				<view class="remake_cont">
					{{orderData.merRemark | filterEmpty}}
				</view>
			</view>
		</view>

		<view class="order_rem" v-if="orderData.refundStatus == 0 && orderData.paid && orderData.status != 9">
			<view class="refund" @click="show(0)">
				{{i18n.chargeback_manage.refund}}
			</view>
			<view class="reject" @click="show(1)">
				{{i18n.chargeback_manage.reject}}
			</view>
			<view class="remark " @click="show(2)">
				{{i18n.chargeback_manage.order_notes}}
			</view>
		</view>
		<view class="order_rem" v-else>
			<view class="all_remark" @click="show(2)">
				{{i18n.chargeback_manage.order_notes}}
			</view>
		</view>
		
		
		<u-popup v-model="del" mode="center" width="600" :height="pHeight" border-radius="20">
			<block v-if="condition==0">
				<view class="mdtitle">
					{{hint}}
				</view>
				<text class="wb">{{i18n.chargeback_manage.refund_orde}}：{{refundOrderNo}}</text>
				<view class="wb">
					<text>{{i18n.chargeback_manage.money}}：{{refundData.refundPrice}}</text>
				</view>
				<view class="mdbuts">
					<view class="but_l" @click="confirm">
						{{i18n.chargeback_manage.filter.confirm}}
					</view>
					<view class="but_r" @click="del = false">
						{{i18n.chargeback_manage.no}}
					</view>
				</view>
			</block>
			<block v-if="condition==1">
				<view class="mdtitle">
					{{hint}}
				</view>
				<text class="wb">{{i18n.chargeback_manage.refund_orde}}：{{refundOrderNo}}</text>
				<view class="content">
					<textarea v-model="reason" :placeholder="i18n.chargeback_manage.textare" maxlength="-1" />
				</view>
				<view class="mdbuts">
					<view class="but_l" @click="confirm">
						{{i18n.chargeback_manage.filter.confirm}}
					</view>
					<view class="but_r" @click="del = false">
						{{i18n.chargeback_manage.no}}
					</view>
				</view>
			</block>
			<block v-if="condition==2">
				<view class="mdtitle">
					{{hint}}
				</view>
				<view class="content cont_top">
					<textarea v-model="remark" :placeholder="i18n.chargeback_manage.textare2" maxlength="-1" />
				</view>
				<view class="mdbuts">
					<view class="but_l" @click="confirm">
						{{i18n.chargeback_manage.filter.confirm}}
					</view>
					<view class="but_r" @click="del = false">
						{{i18n.chargeback_manage.no}}
					</view>
				</view>
			</block>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		filters: {
			filterEmpty(val) {
				let _result = '-'
				if (!val) {
				return _result
				}
				_result = val
				return _result
			}
		},
		
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				merOrderNo: '',
				refundOrderNo: '',
				orderData: {},
				refundData: {},
				pHeight: '270px',
				current: 0,
				del: false,
				condition: '',
				hint: '',
				remark: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang();
			this.merOrderNo = this.$route.query.merOrderNo;
			this.getNewData();
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			getNewData(){
				this.getRefundListData();
				this.getOrderData();
			},
			getOrderData() {
				global.$http.request({
					url: '/api/admin/merchant/order/info',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						orderNo: this.merOrderNo
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.orderData = res.data.data;
					}
				})
			},
			getRefundListData() {
				global.$http.request({
					url: '/api/admin/merchant/refund/order/list',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						merOrderNo: this.merOrderNo,
						refundStatus: 9
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.refundData = res.data.data.list[0];
						this.refundOrderNo = this.refundData.refundOrderNo;
					}
				})
			},
			doRefund() {
				global.$http.request({
					url: '/api/admin/merchant/refund/order/refund',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						refundOrderNo:this.refundOrderNo,
					}
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_success,
						  	icon: 'none',
						  	duration: 3000
						})
						this.form.money = '';
						this.getNewData();
					}else{
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_fail,
						  	icon: 'none',
						  	duration: 3000
						})
					}
				})
			},
			doRefuse() {
				if(!this.reason){
					uni.showToast({
					  	title: this.i18n.chargeback_manage.textare,
					  	icon: 'none',
					  	duration: 3000
					})
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/refund/order/refund/refuse',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						refundOrderNo: this.refundOrderNo,
						reason:  this.reason
					}
				}).then(res => {
					if (res.data.code == 200 && res.data.data) {
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_success,
						  	icon: 'none',
						  	duration: 3000
						})
						this.reason = '';
						this.getNewData();
					}else{
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_fail,
						  	icon: 'none',
						  	duration: 3000
						})
					}
				})
			},
			doRemark() {
				if(!this.remark){
					uni.showToast({
					  	title: this.i18n.chargeback_manage.textare2,
					  	icon: 'none',
					  	duration: 3000
					})
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/refund/order/mark',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'POST',
					data:{
						refundOrderNo: this.refundOrderNo,
						remark:  this.remark
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_success,
						  	icon: 'none',
						  	duration: 3000
						})
						this.remark = '';
						this.getNewData();
					}else{
						uni.showToast({
						  	title: this.i18n.chargeback_manage.submit_fail,
						  	icon: 'none',
						  	duration: 3000
						})
					}
				})
			},
			
			show(index) {
				this.del = true;
				this.condition = index;
				if (index == 0) {
					this.pHeight = '240px';
					this.hint = this.i18n.chargeback_manage.deal_with
				} else if (index == 1) {
					this.pHeight = '270px';
					this.hint = this.i18n.chargeback_manage.reason;
					this.reason = this.refundData.refundReason;
				} else if (index == 2) {
					this.remark = this.refundData.merRemark;
					this.pHeight = '270px';
					this.hint = this.i18n.chargeback_manage.remark
					
				}
			},
			
			//弹框确定
			confirm() {
				this.del = false
				if (this.condition == 0) {
					this.doRefund();
				}
				if (this.condition == 1) {
					this.doRefuse();
				}
				if (this.condition == 2) {
					this.doRemark();
				}
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 130rpx;

		.main {
			width: 750rpx;
			height: 100%;

			.alls {
				.state {
					width: 750rpx;
					height: 120rpx;
					background: #304156;
					line-height: 120rpx;

					text {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						padding-left: 41rpx;
					}
				}

				.user {
					padding: 35rpx 27rpx 13rpx 27rpx;
					background-color: #fff;
					margin-bottom: 10rpx;

					.name {
						display: flex;
						align-items: center;
						padding-bottom: 22rpx;

						.title {
							width: 140rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
						}

						.rel {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}

				.userinfo {
					padding: 32rpx 27rpx;
					background-color: #fff;
					margin-bottom: 10rpx;

					.info_t {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.infot_l {
							display: flex;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;

							.info_tit {
								display: block;
								width: 140rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}

							.info_phone {
								display: block;
								width: 80rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}

					.info_b {

						.address {
							display: flex;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
							padding-top: 23rpx;

							.info_tit {
								display: block;
								width: 140rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}

							.info_phone {
								display: block;
								width: 80rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}
				}


				.shop {
					margin-bottom: 10rpx;
					background-color: #fff;
					padding: 20rpx 30rpx 18rpx 22rpx;
					display: flex;

					.shop_l {
						padding-top: 7rpx;

						image {
							width: 140rpx;
							height: 140rpx;
						}
					}

					.shop_r {
						padding-left: 21rpx;

						.shop_tit {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}

						.shop_style {
							padding: 14rpx 0;
							display: flex;
							justify-content: space-between;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #4D4D4D;
						}

						.shop_size {
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #4D4D4D;
						}

						.shop_money {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FF1900;
							display: flex;
							justify-content: flex-end;
						}
					}
				}

				.quantity {
					margin-bottom: 10rpx;
					background-color: #fff;
					padding: 25rpx 30rpx 12rpx 20rpx;

					.shop_quantit {
						display: flex;
						justify-content: space-between;
						padding-bottom: 32rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;

						.title {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}

						.pay_true {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}

				.order {
					margin-bottom: 10rpx;
					padding: 30rpx 21rpx;
					background-color: #fff;

					.order_tit {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF2400;
					}

					.order_info {
						display: flex;
						align-items: center;
						padding-top: 31rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #4C4C4C;

						.title {
							display: block;
							width: 165rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;

						}
					}
				}

				.user_remaker {
					padding: 29rpx 21rpx;
					margin-bottom: 10rpx;
					background-color: #fff;

					.remaker_tit {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF2400;
					}

					.remake_cont {
						padding: 30rpx 32rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #4C4C4C;
					}
				}

			}

			.order_rem {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				height: 98rpx;
				text-align: center;
				line-height: 98rpx;
				display: flex;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				.reject{
					width: 250rpx;
					height: 98rpx;
					background: #304156;
				}
				.refund{
					width: 250rpx;
					height: 98rpx;
					background: #0F82FF;
				}
				.remark{
					width: 250rpx;
					height: 98rpx;
					background: #808080;
				}
				.all_remark{
					width: 100%;
					height: 98rpx;
					background: #808080;
				}
			}
			
			.mdtitle {
				padding-top: 49rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				text-align: center;
			}
			
			.wb {
				display: block;
				text-align: left;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				padding: 32rpx 0 32rpx 32rpx;
			}
			
			.content {
				padding: 22rpx;
				width: 500rpx;
				margin: 0 auto;
				height: 178rpx;
				background: #F2F2F2;
				margin-left: 16px;
				
				textarea {
					width: 450rpx;
					height: 140rpx;
					background: #F2F2F2;
				}
			}
			
			.cont_top {
				margin: 39rpx auto 60rpx auto;
			}
			
			.mdbuts {
				margin-top: 52rpx;
				line-height: 64rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: space-around;
				padding: 0 90rpx;
			
				.but_l {
					width: 160rpx;
					height: 64rpx;
					background: #304156;
					border-radius: 32rpx;
				}
			
				.but_r {
					width: 160rpx;
					height: 64rpx;
					background: #B3B3B3;
					border-radius: 32rpx;
				}
			}
			
		}
	}
</style>
